<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="common/header"/>
<body>

<!--导航-->
<header th:include="common/nav" />

<!--食谱推荐-->
<div id="cookbookCarousel" class="cookbook-carousel carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <a href="#"><img th:src="@{/image/2.jpg}"></a>
        </div>
        <div class="item">
            <a href="#"><img th:src="@{/image/2.jpg}"></a>
        </div>
    </div>
    <a class="carousel-control left" href="#cookbookCarousel"
       data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right" href="#cookbookCarousel"
       data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>
</div>

<div class="split-line"></div>
<!--月季食谱-->
<div class="tab">
    <a id="tab0" href="#monthCookbookCarousel" data-slide-to="0">最新</a>&nbsp;|&nbsp;
    <a  id="tab1" href="#monthCookbookCarousel" data-slide-to="1">随机</a>&nbsp;
</div>
<div id="monthCookbookCarousel" class="month-cookbook-carousel carousel slide">
    <div class="carousel-inner">
        <div id="item1" class="item active">
            <div class="container month-cookbook">
                <div class="row">
                    <h3 class="title">最新食谱推荐</h3>
                </div>
                <div class="row">
                    <div class="col-xs-3" th:each="cookbook : ${newCookbookMap.rows}">
                        <a th:href="'/cookbook?cookbookId=' + ${cookbook.id}" class="cookbook">
                            <span class="icon collect"></span>
                            <span class="collect icon-collect"
                                  data-toggle="tooltip" data-placement="bottom" th:data="${cookbook.id}" title="收藏到厨房"></span>
                            <span class="icon shopping-cart"></span>
                            <span class="shopping-cart icon-shopping-cart"
                                  data-toggle="tooltip" data-placement="bottom" th:data="${cookbook.id}" title="加入购物车"></span>
                            <span class="info1 info-bg">量</span>
                            <span class="info2">步</span>
                            <img class="cookbook-img" th:src="${cookbook.coverimg}"/>
                            <div class="cookbook-info ci">
                                <div class="cookbook-name" th:text="${cookbook.cookbookname}"></div>
                                <div class="cookbook-number">
                                    <span class="left">购买量：<span class="number"><span th:text="${cookbook.orderNumber}"></span>&nbsp;份</span></span>
                                    <span class="right">食材价：<span class="number base-food"><span th:text="${cookbook.foodPrice}"></span>&nbsp;元</span></span>
                                    <div class="clear"></div>
                                    <span class="left">评论数：<span class="number"><span th:text="${cookbook.disscussNumber}"></span>&nbsp;条</span></span>
                                    <span class="right">浏览量：<span class="number"><span th:text="${cookbook.browsequantity}"></span>&nbsp;次</span></span>
                                </div>
                            </div>
                            <div class="cookbook-info ci2">
                                <div class="cookbook-step-duration">
                                    <span class="icon icon-clock"></span>
                                    <span class="cookbook-step"><span th:text="${cookbook.stepNumber}"></span></span>&nbsp;步/
                                    大概&nbsp;<span class="cookbook-duration"><span th:text="${cookbook.duration}"></span></span>&nbsp;分钟
                                </div>
                                <div class="cookbook-style"><span class="icon icon-cookbook-style"></span>&nbsp;<span th:text="${cookbook.style}"></span></div>
                            </div>

                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div id="item2" class="item">
            <div class="container month-cookbook">
                <div class="row">
                    <h3 class="title">随机食谱推荐</h3>
                </div>
                <div class="row">
                    <div class="col-xs-3" th:each="cookbook : ${randomCookbookMap.rows}">
                        <a th:href="'/cookbook?cookbookId=' + ${cookbook.id}" class="cookbook">
                            <span class="icon collect"></span>
                            <span class="collect icon-collect"
                                  data-toggle="tooltip" data-placement="bottom" th:data="${cookbook.id}" isCollect="true" title="收藏到厨房"></span>
                            <span class="icon shopping-cart"></span>
                            <span class="shopping-cart icon-shopping-cart"
                                  data-toggle="tooltip" data-placement="bottom" th:data="${cookbook.id}" title="加入购物车"></span>
                            <span class="info1 info-bg">量</span>
                            <span class="info2">步</span>
                            <img class="cookbook-img" th:src="${cookbook.coverimg}"/>
                            <div class="cookbook-info ci">
                                <div class="cookbook-name" th:text="${cookbook.cookbookname}"></div>
                                <div class="cookbook-number">
                                    <span class="left">购买量：<span class="number"><span th:text="${cookbook.orderNumber}"></span>&nbsp;份</span></span>
                                    <span class="right">食材价：<span class="number base-food"><span th:text="${cookbook.foodPrice}"></span>&nbsp;元</span></span>
                                    <div class="clear"></div>
                                    <span class="left">评论数：<span class="number"><span th:text="${cookbook.disscussNumber}"></span>&nbsp;条</span></span>
                                    <span class="right">浏览量：<span class="number"><span th:text="${cookbook.browsequantity}"></span>&nbsp;次</span></span>
                                </div>
                            </div>
                            <div class="cookbook-info ci2">
                                <div class="cookbook-step-duration">
                                    <span class="icon icon-clock"></span>
                                    <span class="cookbook-step"><span th:text="${cookbook.stepNumber}"></span></span>&nbsp;步/
                                    大概&nbsp;<span class="cookbook-duration"><span th:text="${cookbook.duration}"></span></span>&nbsp;分钟
                                </div>
                                <div class="cookbook-style"><span class="icon icon-cookbook-style"></span>&nbsp;<span th:text="${cookbook.style}"></span></div>
                            </div>

                        </a>
                    </div>
                </div>
        </div>
    </div>
        <a class="carousel-control left" href="#monthCookbookCarousel"
           data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#monthCookbookCarousel"
           data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>
    </div>
</div>

<div th:include="common/bottom"></div>
</body>
<script th:src="@{/js/index.js}"></script>
<link rel="stylesheet" th:href="@{/css/index.css}"/>
</html>